<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		*{
			pading:0;
			margin:0;
		}
		#root .listWrap{
			position: relative;
			margin:100px auto;
			width:300px;
			border:1px solid red;
			overflow-y:scroll;
		}
		#root .list{
			position: absolute;
			top:0;
			left:0;
		}
		#root .list p{
			line-height: 30px;
		}
	</style>
	<script src="lib/vue.js"></script>
	<script src="lib/lodash.js"></script>
</head>
<body>
	<div id="root">
		<div ref="listWrap" class="listWrap" @scroll="scrollHandler">
			<div class="list" ref="list">
				<p v-for="item in showList">{{item}}</p>
			</div>
			<div ref="scrollBar"></div>
		</div>
	</div>
</body>
<script>
	new Vue({
		el:"#root",
		data:{
			list:[],
			itemNum:10,// 可视区域内显示的条数
			itemHeight:30,// 每条数据显示的高度
			start:0,// 起始位置
			end:10,// 结束位置
		},
		computed:{
			showList(){
				return this.list.slice(this.start,this.end);
			}
		},
		methods:{
			// scrollHandler(){
			//
			// 	const scrollTop = this.$refs.listWrap.scrollTop;
			// 	console.log(scrollTop)
			// 	// 获取滚动的条数
			// 	this.start = Math.floor(scrollTop/this.itemHeight);
			// 	this.end = this.start+this.itemNum;
			//
			// 	this.$refs.list.style.top = scrollTop+"px";
			// }
			
			scrollHandler:_.throttle(function(){
				const scrollTop = this.$refs.listWrap.scrollTop;
				console.log(scrollTop)
				// 获取滚动的条数
				this.start = Math.floor(scrollTop/this.itemHeight);
				this.end = this.start+this.itemNum;

				this.$refs.list.style.top = scrollTop+"px";
			},100)
		},
		mounted(){
			for(let i=0;i<100000;i++){
				this.list.push("我是长数据列表"+i);
			}
			this.$refs.listWrap.style.height = this.itemNum*this.itemHeight+"px";
			this.$refs.scrollBar.style.height = 100000*this.itemHeight+"px";
			
		}
		
	})
</script>
</html>